<script setup>
  import { ref, Suspense, watch } from 'vue'
  import { collectOptions } from '@/helpers/context.js'

  import CompanyMap from '@/components/company/CompanyMap.vue'
  import TabbedView from '@/components/TabbedView.vue'
  import IconSpan from '@/components/IconSpan.vue'
  import TabHeader from '@/components/TabHeader.vue'
  import { useRoute, useRouter } from 'vue-router'

  const options = collectOptions()
  const router = useRouter()
  const route = useRoute()

  const extraPlacesUrl = '/public/cae_places.geojson'
  const companiesFields = [
    'id',
    'name',
    'phone',
    'email',
    'mobile',
    'goal',
    'activities_labels',
    'logo_id',
    'users_gallery',
  ]
  const baseCompaniesUrl = '/api/v1/companies.geojson?' + companiesFields.map(x => `fields=${x}`).join('&')
  // We re-use companies editting form_config
  const currentCompaniesUrl = ref(baseCompaniesUrl)


  watch(() => route.query, (newQuery) => {
    const queryString = new URLSearchParams(newQuery).toString()
    currentCompaniesUrl.value = `${baseCompaniesUrl}&${queryString}`
  })

</script>

<template>
  <Suspense>
    <RouterView name='CompanyURLSearchFilters' v-slot='{ Component }'>
      <component :is='Component' />
    </RouterView>
    <template #fallback>Chargement…</template>
  </Suspense>
  <Suspense>
    <TabbedView>
      <template #headers>
        <TabHeader :href="options.tab_url">
          <IconSpan name='list' alt="" />
          {{options.tab_title}}
        </TabHeader>
        <TabHeader active>
          <IconSpan name='map-location-dot' alt="" />
          Carte des enseignes
        </TabHeader>
      </template>
      <template #panels>
        <CompanyMap :companiesUrl='currentCompaniesUrl' :extraPlacesUrl='extraPlacesUrl'/>

      </template>
    </TabbedView>
    <template #fallback> Chargement...</template>
  </Suspense>
</template>
